<template>
  <div class="strength-container">
    <div class="left-panel">
      <div class="drawer-head">
        <span>实力模块</span>
      </div>
      <div class="panel-tree">
        <el-tree ref="zzjgTree" node-key="id" :data="treeData" :props="defaultProps" default-expand-all
                 :draggable="true" :highlight-current="true" :allow-drop="allowDrop" :allow-drag="allowDrag"
                 @node-click="zzjgTreeClick"
        >
          <span :id="data.id" class="custom-tree-node" slot-scope="{ node, data }" @dragover.prevent
                @drop="handleTreeDrop"
          >
            <div style="display: flex;align-items: center;">
              <img :src="require(`@/assets/image/bdjg/${data.icon}.png`)" style="width: 20px;height: 22px;" alt="">
              <span>{{ data.label }}</span>
            </div>
            <div>
              <el-button class="el-icon-edit-outline" type="text" size="mini" style="font-size: 18px;color: #333;"
              ></el-button>
            </div>
          </span>
        </el-tree>
      </div>
      <div style="height: 300px;">
        <div class="drawer-head">
          <span>基础模块</span>
        </div>
        <div class="zzjg-icons">
          <div v-for="(item, index) in zzjgIcons" :key="index" class="zzjg-item" draggable="true"
               @dragstart="handleDragZzjg($event, item)"
          >
            <img :src="require(`@/assets/image/bdjg/${item.icon}.png`)" style="width: 30px;height: 30px;" alt="">
            <!-- <span>{{ item.name }}</span> -->
          </div>
        </div>
      </div>
    </div>
    <div class="right-panel">
      <!-- 上部分：组织机构 -->
      <div class="org-section">
        <div class="section-head">
          <span>实力结构</span>
        </div>
        <div class="org-content" id="graphContainer">
          <!-- 这里添加组织机构的具体内容 -->
        </div>
      </div>
      <!-- 下部分：作战实力 -->
      <div class="combat-section">
        <div class="section-head" @click="getData">
          <span>作战实力</span>
        </div>
        <div class="combat-content" @dragover.prevent @drop="handleDrop">
          <!-- 这里添加作战实力的具体内容 -->
          <!-- <div class="drop-container" @dragover.prevent @drop="handleDrop"></div> -->
          <!-- 人员区块 -->
          <div class="block-head">人员岗位</div>
          <div class="attribute-block" style="background-color: #fff;margin: 5px 10px 10px;">
            <div class="block-content" style="border: 1px solid #0a5387;">
              <div v-if="!personnelBlock || personnelBlock.length === 0"
                   style="font-size:14px; margin-left: 10px; color: #666666;"
              >暂无数据
              </div>
              <div v-for="(item, index) in personnelBlock" :key="'dropped-personnel-' + index"
                   class="dropped-item" @mouseenter="() => showTool = item" @mouseleave="() => showTool = null">
                <div style="width: 60px;height: 80px; padding: 5px 8px;">
                  <el-image :src="require('@/assets/image/25.png')" style="width: 100%; height: 100%"></el-image>
                </div>
                <div class="attribute-name" :title="item.name">{{ item.name }}</div>
                <div v-if="showTool && showTool.id === item.id" class="hoverTool">
                  <div style="line-height: 50px;">编辑</div>
                  <div style="line-height: 50px; color:#F56C6C;">移除</div>
                </div>
              </div>
            </div>
          </div>
          <!-- 装备区块 -->
          <div class="block-head">装备类型</div>
          <div style="display: flex;flex-wrap: wrap; padding: 0 10px;">
            <template v-for="(item, index) in equipmentBlock">
<!--              <div class="attribute-block" @dragging="onDrag" @resizing="onResize"></div> -->
              <div class="wqzb-content" @mouseenter.stop="() => showTool = item" @mouseleave="() => showTool = null">
                <div class="block-body">
                  <div class="dropped-item">
                    <div class="" style="width: 90px; height: 70px;padding: 5px;" >
                      <el-image :src="item.icon ? require(`@/assets/image/wqzb/${item.icon}.png`) : null" fit="fill" style="width:100%; height: 100%"></el-image>
                    </div>
                  </div>
                  <div v-for="(peo, pInd) in item.peoples" class="dropped-people">
                    <div class="" style="width: 30px; height: 70px;">
                      <el-image :src="require('@/assets/image/25.png')" fit="fill" style="width:100%; height: 100%"></el-image>
                    </div>
                    <div class="attribute-name">{{peo.name || `席位${pInd+1}`}}</div>
                  </div>
                </div>
                <div class="block-footer">
                  <div class="wqzb-name">
                    <span>{{ item.name }}</span>
                    <div><el-input-number size="mini" :min="0" v-model="item.count" @change="wqzbNumChange($event,item)"></el-input-number></div>
                  </div>
                </div>
                <div v-if="showTool && showTool.name === item.name" class="hoverTool1">
                  <div class="tool-btn" @click="clickWqzbFill(item)">信息录入</div>
                </div>
              </div>

            </template>
          </div>
          <!-- 设施区块 -->
        </div>
      </div>
    </div>
    <!-- 基础模块弹框 -->
    <div class="attribute-right">
      <div class="drawer-content">
        <div class="drawer-head" style="margin: 0px 10px 0;">
          <span>基础模块</span>
        </div>
        <!-- 属性面板 -->
        <div class="drawer-attributes">
          <!-- 人员属性 -->
          <div class="attribute-section">
            <div class="section-title">人员</div>
            <div class="attribute-items" style="grid-template-columns: repeat(auto-fill, minmax(50px, 1fr));">
              <div v-for="(item, index) in personnelList" :key="'personnel-' + index" class="attribute-item"
                   :title="item.name"
                   draggable="true" @dragstart="handleDragStart($event, 'personnel', item)"
              >
                <div style="width: 60px;height: 80px; padding: 5px 8px;">
                  <el-image :src="require('@/assets/image/25.png')" style="width: 100%; height: 100%"></el-image>
                </div>
                <div class="attribute-name" :title="item.name">{{ item.name }}</div>
              </div>
            </div>
          </div>
          <!-- 装备属性 -->
          <div class="attribute-section">
            <div class="section-title">装备</div>
            <div class="attribute-items" style="grid-template-columns: repeat(auto-fill, minmax(70px, 1fr));">
              <div v-for="(item, index) in equipmentList" :key="'equipment-' + index" class="attribute-item"
                   style="flex-direction: column;" draggable="true" :title="item.name"
                   @dragstart="handleDragStart($event, 'equipment', item)"
              >
                <div style="width: 75px; height: 55px;padding: 5px;">
                  <el-image :src="item.icon ? require(`@/assets/image/wqzb/${item.icon}.png`) : null" style="width: 100%; height: 100%"></el-image>
                </div>
                <div class="attribute-name" :title="item.name">{{ item.name }}</div>
              </div>
            </div>
          </div>
          <!-- 设施属性 -->
          <div class="attribute-section">
            <div class="section-title">设施</div>
            <div class="attribute-items">
              <div style="margin-left: 10px">暂无数据</div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <!-- 装备录入 -->
    <vxe-modal
      :title="wqzbCurrent ? wqzbCurrent.name : ''"
      v-model="infoFomrVisible"
      width="60%"
      height="50%"
      :mask="true"
      :drag="true"
      showFooter
      class="attribute-modal"
    >
      <template #default>

        <template v-for="(item, ind) in wqzbCurrent.itemInfo">
          <div style="font-size: 15px;color: #325e96;">{{`${ind+1}号车：`}}</div>
          <vxe-form :title-colon="false" ref="formRef" title-align="right" size="small" :data="item">
            <vxe-form-item title="车架号" span="6" :item-render="{}" title-overflow>
              <template #default="params">
                <vxe-input v-model="params.cjh" placeholder="车架号" clearable></vxe-input>
              </template>
            </vxe-form-item>
            <vxe-form-item title="武器装备编号" span="6" :item-render="{}" title-overflow>
              <template #default="params">
                <vxe-input v-model="params.cjh" placeholder="武器装备编号" clearable></vxe-input>
              </template>
            </vxe-form-item>
            <vxe-form-item title="助记码" span="6" :item-render="{}" title-overflow>
              <template #default="params">
                <vxe-input v-model="params.cjh" placeholder="助记码" clearable></vxe-input>
              </template>
            </vxe-form-item>
            <vxe-form-item title="检索码" span="6" :item-render="{}" title-overflow>
              <template #default="params">
                <vxe-input v-model="params.cjh" placeholder="检索码" clearable></vxe-input>
              </template>
            </vxe-form-item>
          </vxe-form>
        </template>
      </template>
      <template #footer>
        <el-button @click="infoFomrVisible = false;">取消</el-button>
        <el-button type="primary" @click="clickSubmitWqzb">确定</el-button>
      </template>
    </vxe-modal>
  </div>
</template>

<script>
import { Graph } from '@antv/x6'
import { DagreLayout } from '@antv/layout'
// import { Selection } from '@antv/x6-plugin-selection'
import { convertData, processNode } from './utils.js'
import VXETable from 'vxe-table'

export default {
  name: 'ZzStrength',
  data() {
    return {
      infoFomrVisible: false,
      showTool: null,
      treeData: [
        {
          id: '01', label: '营', icon: '营',
          children: [
            {
              id: '0101', label: '连', icon: '连',
              children: [
                { id: '010101', label: '排', icon: '排' },
                { id: '010102', label: '排', icon: '排' },
                { id: '010103', label: '排', icon: '排' }
              ]
            }]
        }],
      defaultProps: {
        children: 'children',
        label: 'label'
      },
      zzjgTreeNode: null,
      // 在这里定义需要的数据
      drawerVisible: false,  // 抽屉显示状态
      zzjgIcons: [
        // {id:'1', name: '军', icon: '军', level: 1 },
        // {id:'2', name: '旅', icon: '旅', level: 2 },
        { id: '3', name: '营', icon: '营', level: 3 },
        { id: '4', name: '连', icon: '连', level: 4 },
        { id: '5', name: '排', icon: '排', level: 5 },
        { id: '6', name: '班', icon: '班', level: 6 }
      ],
      // 基础数据内容
      personnelList: [
        {nm:'01', name: '营长', icon: 'el-icon-user' },
        {nm:'02', name: '副营长', icon: 'el-icon-user-solid' },
        {nm:'03', name: '连长', icon: 'el-icon-user' },
        {nm:'04', name: '副连长', icon: 'el-icon-user-solid' },
        {nm:'05', name: '排长', icon: 'el-icon-user' },
        {nm:'06', name: '班长', icon: 'el-icon-user-solid' },
        {nm:'07', name: '炮手', icon: 'el-icon-user-solid' },
        {nm:'08', name: '士兵', icon: 'el-icon-user-solid' },
        {nm:'09', name: '参谋', icon: 'el-icon-user-solid' }
      ],
      equipmentList: [
        {
          zbnm: 'ZBD001',
          icon: '指挥车',
          zbflnm: '',
          name: '08式指挥车',
          peoples:[
            {id:'1', name: '', icon: 'el-icon-user',count:'', sfz:''},
            {id:'2', name: '', icon: 'el-icon-user',count:'', sfz:''},
            {id:'3', name: '', icon: 'el-icon-user',count:'', sfz:''},
            {id:'4', name: '', icon: 'el-icon-user',count:'', sfz:''}
          ] },
        {
          zbnm: 'ZBD002',
          icon: '步战车',
          zbflnm: '',
          name: '05式步战车',
          peoples:[
            {id:'1', name: '', icon: 'el-icon-user', count:'', sfz:''},
            {id:'2', name: '', icon: 'el-icon-user', count:'', sfz:''},
            {id:'3', name: '', icon: 'el-icon-user', count:'', sfz:''},
            {id:'4', name: '', icon: 'el-icon-user', count:'', sfz:''},
            {id:'5', name: '', icon: 'el-icon-user', count:'', sfz:''},
            {id:'6', name: '', icon: 'el-icon-user', count:'', sfz:''},
            {id:'7', name: '', icon: 'el-icon-user', count:'', sfz:''},
          ]},
        {
          zbnm: 'ZBD003',
          icon: '突击车',
          zbflnm: '',
          name: '11式突击车',
          peoples:[
            {id:'1', name: '', icon: 'el-icon-user',count:'', sfz:''},
            {id:'2', name: '', icon: 'el-icon-user',count:'', sfz:''},
            {id:'3', name: '', icon: 'el-icon-user',count:'', sfz:''},
            {id:'4', name: '', icon: 'el-icon-user',count:'', sfz:''},
            {id:'5', name: '', icon: 'el-icon-user',count:'', sfz:''}
          ]},
        {
          zbnm: 'ZBD004',
          icon: '抢修车',
          zbflnm: '',
          name: '12式抢修车',
          peoples:[
            {id:'1', name: '', icon: 'el-icon-user',count:'', sfz:''},
            {id:'2', name: '', icon: 'el-icon-user',count:'', sfz:''},
            {id:'3', name: '', icon: 'el-icon-user',count:'', sfz:''},
            {id:'4', name: '', icon: 'el-icon-user',count:'', sfz:''},
            {id:'5', name: '', icon: 'el-icon-user',count:'', sfz:''},
            {id:'6', name: '', icon: 'el-icon-user',count:'', sfz:''}
          ]},
        {
          zbnm: 'ZBD005',
          icon: '迫榴车',
          zbflnm: '',
          name: '120迫榴车',
          peoples:[
            {id:'1', name: '', icon: 'el-icon-user',count:'', sfz:''},
            {id:'2', name: '', icon: 'el-icon-user',count:'', sfz:''},
            {id:'3', name: '', icon: 'el-icon-user',count:'', sfz:''},
            {id:'4', name: '', icon: 'el-icon-user',count:'', sfz:''}
          ]}
      ],
      facilityList: [
        { name: '设施1', icon: 'el-icon-office-building' },
        { name: '设施2', icon: 'el-icon-school' }
      ],
      // 拖拽后的数据块
      personnelBlock: [],
      equipmentBlock: [],
      facilityBlock: {
        show: false,
        items: []
      },
      vLine: [],
      hLine: [],
      graph: null,
      currentHighlight: null, // 存储当前高亮节点
      wqzbCurrent: null,
    }
  },
  created() {
    this.getZzjgTree()
    this.setData()
  },
  mounted() {
    this.initGraph()
  },
  beforeDestroy() {
    if (this.graph) this.graph.dispose()
  },
  methods: {
    setData(){
      let personnel = JSON.parse(localStorage.getItem('personnelBlock_0101'));
      this.personnelBlock = personnel ? personnel.list : []

      let equipmentBlock = JSON.parse(localStorage.getItem('equipmentBlock'));
      this.equipmentBlock = equipmentBlock || []
    },
    getZzjgTree() {
      let data = this.treeData[0]
      console.log(data)
      this.$nextTick(() => {
        this.$refs.zzjgTree.setCurrentKey(data.id || null)
      })
    },
    initGraph() {
      // 转换数据
      const result = convertData(this.treeData)
      // console.log(result);

      this.graph = new Graph({
        container: document.getElementById('graphContainer'),
        // selecting: {
        //   enabled: true,
        //   className: 'my-selecting',
        // },
        background: {
          color: '#ffffff' // 设置画布背景颜色
        },
        grid: {
          size: 10,      // 网格大小 10px
          visible: true // 渲染网格背景
        },
        panning: {
          enabled: true
          // eventTypes: ['leftMouseDown', 'rightMouseDown', 'mouseWheel']
        },
        scroller: {
          enabled: true,
          pannable: true,
          pageVisible: true,
          pageBreak: false
        },
        mousewheel: {
          enabled: true,
          modifiers: ['ctrl', 'meta']
        },
      })
      // console.log(result);
      const dagreLayout = new DagreLayout({
        type: 'dagre',
        rankdir: 'TB',
        // align: 'UL',
        ranksep: 15,
        nodesep: 30,
        controlPoints: true
      })
      let data = {
        // shape: 'edge',
        ...result,
      }
      const newModel = dagreLayout.layout(data)
      this.graph.fromJSON(newModel)
      // this.graph.zoomToFit({maxScale:1});
      this.graph.zoom(-0.2)
      this.graph.centerContent()
      // 绑定点击事件
      this.graph.on('cell:click', this.handleNodeClick)

    },
    // 节点点击处理
    handleNodeClick({ node }) {
      console.log(node)
      this.graph.startBatch('highlight')
      // 执行样式修改操作
      if (this.currentHighlight?.id === node.id) {
        // 重复点击已高亮节点：取消高亮
        this.resetHighlight()
        this.graph.stopBatch('highlight')
      } else {
        // 点击新节点：先重置旧高亮，再设置新高亮
        this.resetHighlight()
        this.setHighlight(node)
        this.graph.stopBatch('highlight')
      }
    },
    // 设置高亮
    setHighlight(node) {
      node.attr('body', {
        fill: '#FFC107',     // 高亮填充色
        stroke: '#FF9800',   // 高亮边框
        strokeWidth: 2
      })
      this.currentHighlight = node // 存储引用
    },
    // 重置高亮
    resetHighlight() {
      if (this.currentHighlight) {
        this.currentHighlight.attr('body', {
          fill: '#ffffff',   // 默认填充色
          stroke: '#333',    // 默认边框
          strokeWidth: 1
        })
        this.currentHighlight = null
      }
    },
    zzjgTreeClick(data) {
      const cellView = this.graph.getCellById(data.id)
      console.log(cellView)
      this.handleNodeClick({ node: cellView })
    },
    clickWqzbFill(obj) {
      this.wqzbCurrent = {...obj};
      this.infoFomrVisible = true
    },
    // 拖拽开始事件
    handleDragStart(event, type, item) {
      event.dataTransfer.setData('type', type);
      event.dataTransfer.setData('item', JSON.stringify({ ...item, count: 1 }))
    },
    // 拖拽放置事件
    handleDrop(event) {
      const type = event.dataTransfer.getData('type')
      const item = JSON.parse(event.dataTransfer.getData('item'))
      switch (type) {
        case 'personnel':
          this.personnelBlock.push({ id: new Date().getTime(), bdnm: '0101', ...item })
          break
        case 'equipment':
          let newObj = {}
          let index = this.equipmentBlock.findIndex(fi => fi.name === item.name);
          if (index !== -1) {
            this.equipmentBlock[index].count++;
            let count = this.equipmentBlock[index].count;
            let newInfo = {id: count, cjh:'', wqzbbh:'', ietazjm:'', ietajsm: '' };
            this.equipmentBlock[index].itemInfo.push(newInfo)
          } else {
            newObj = { ...item, itemInfo:[{id: 1, cjh:'', wqzbbh:'', ietazjm:'', ietajsm: '' },] }
            this.equipmentBlock.push(newObj)
          }
          console.log(this.equipmentBlock)
          break
        case 'facility':
          this.facilityBlock.show = true
          this.facilityBlock.items.push(item)
          break
      }
    },
    wqzbNumChange(val,obj){
      console.log(val,obj, this.equipmentBlock)
      if (val === 0) {
        this.equipmentBlock = []
        return false;
      }
      let index = this.equipmentBlock.findIndex(fi => fi.name === obj.name);
      if (index !== -1) {
        this.equipmentBlock[index].count = val;
        let count = this.equipmentBlock[index].count;
        let oldCount = this.equipmentBlock[index].itemInfo.length;
        if (count > oldCount){
          let newInfo = {id: count, cjh:'', wqzbbh:'', ietazjm:'', ietajsm: '' };
          this.equipmentBlock[index].itemInfo.push(newInfo)
        }else {
          let newnum = oldCount - count
          console.log(newnum)
          for (let i = 0; i < newnum; i++) {
            this.equipmentBlock[index].itemInfo.pop();
          }
        }
      }
    },
    // 辅助线回调事件
    getRefLineParams(params) {
      const { vLine, hLine } = params
      this.vLine = vLine
      this.hLine = hLine
    },
    // 添加打开抽屉的方法
    openDrawer() {
      this.drawerVisible = true
    },
    // 修改拖拽和缩放的处理方法
    onDrag(x, y) {
      console.log('拖拽位置:', x, y)
    },
    onResize(x, y, width, height) {
      console.log('调整大小:', width, height)
      this.$nextTick(() => {
        window.dispatchEvent(new Event('resize'))
      })
    },
    handleDragZzjg(event, item) {
      // 设置拖拽数据
      event.dataTransfer.effectAllowed = 'move'
      event.dataTransfer.setData('application/json', JSON.stringify(item))
    },
    allowDrop(draggingNode, dropNode, type) {
      return true // 允许拖拽到任何节点
    },
    allowDrag() {
      return true // 允许任何节点被拖拽
    },
    handleTreeDrop(event) {
      event.preventDefault()
      try {
        // 尝试从两种可能的格式获取数据
        const item = JSON.parse(event.dataTransfer.getData('application/json') || event.dataTransfer.getData('item'))
        // const targetNode = event.target.closest('.el-tree-node')
        const targetNode = event.currentTarget
        if (!targetNode) return
        // console.log(targetNode);

        let node = this.$refs.zzjgTree.getNode(targetNode.id || null)
        // console.log(node);
        if (!node) return false
        const targetData = node
        const targetLevel = this.getNodeLevel(targetData)

        // 验证层级关系
        if (item.level <= targetLevel) {
          this.$message.warning('不能将高级别单位拖拽到低级别单位下')
          return
        }

        // 创建新节点
        const newNode = {
          label: item.name,
          icon: item.icon,
          children: [],
          id: new Date().getTime().toString()
        }

        let obj = this.findNodeBFS(this.treeData, targetNode.id)
        if (obj.children) {
          obj.children.push(newNode)
        } else {
          obj.children = [newNode]
        }
        this.$nextTick(() => {
          this.$refs.zzjgTree.append(newNode, obj)
          node.expanded = true
        })

        console.log(node, obj)
        console.log(this.treeData)

        // 添加到目标节点的children中
        // if (!targetData.children) {
        //   this.$set(targetData, 'children', [])
        // }
        // targetData.children.push(newNode)
      } catch (error) {
        console.error('Drop handling error:', error)
      }
    },
    findNodeBFS(treeArray, targetId) {
      const queue = [...treeArray] // 初始化队列
      while (queue.length > 0) {
        const node = queue.shift() // 取出队列头部节点
        if (node.id === targetId) return node
        // 将子节点加入队列尾部
        if (node.children?.length) {
          queue.push(...node.children)
        }
      }
      return null // 未找到
    },
    getNodeLevel(node) {
      let level = 0
      let current = node
      while (current.parent) {
        level++
        current = current.parent
      }
      return level
    },
    clickSubmitWqzb(){
      this.infoFomrVisible = false;
    },
    getData(){
      console.log(this.personnelBlock);
      console.log(this.equipmentBlock);
      localStorage.setItem('equipmentBlock', JSON.stringify(this.equipmentBlock));

      let newPerson = {
        bdnm: '0101',
        list: this.personnelBlock
      }
      localStorage.setItem('personnelBlock_'+ '0101', JSON.stringify(newPerson));
      VXETable.modal.message({status: 'success', content: 'ok', duration: 1000});
    }
  }
}
</script>

<style lang="scss" scoped>
::v-deep.vxe-modal--wrapper {
  width: 0 !important;
  height: 0 !important;
}

::v-deep.vxe-modal--wrapper.is--mask:before,
::v-deep.vxe-modal--wrapper.lock--view:before {
  content: none;
}

::v-deep .x6-graph-background {
  background: rgb(255 255 255 / 52%) !important;
}

::v-deep .vdr {
  //border: 1px dashed #d0dee7;
  border: 1px solid #bccddf;
  background: #fff;
  border-radius: 2px;
}

.strength-container {
  display: flex;
  height: 100%;
  padding: 10px;

  .left-panel {
    width: 300px;
    padding: 0px 8px 10px;
    height: 100%;
    background: #fff;
    background: url("../../assets/image/left-box.png") no-repeat;
    background-size: 100% 100%;
    //border-radius: 4px;
    //box-shadow: 0 2px 12px 0 rgba(0, 0, 0, .1);
    margin-right: 10px;

    .zzjg-icons {
      display: flex;
      flex-wrap: wrap;
      padding: 8px;

      .zzjg-item {
        width: 30px;
        height: 30px;
        margin-right: 15px;
        cursor: all-scroll;

        &:hover {
          //transform: scale(1.1);
        }
      }
    }
  }

  .panel-tree {
    height: calc(100% - 330px);
    margin-top: 10px;

    .custom-tree-node {
      width: 100%;
      height: 30px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      font-size: 16px;
      color: #333;

      span {
        margin-left: 5px;
      }
    }

    ::v-deep .el-tree-node__content {
      height: 30px;
    }
  }

  .right-panel {
    flex: 1;
    width: calc(100% - 620px);
    position: relative;
  }
}

.org-section {
  height: calc(30% - 10px);
  margin-bottom: 10px;
  border: 1px solid #0a5387;
  background-color: rgb(255 255 255 / 83%);
}

.combat-section {
  height: calc(70% - 0px);
  background: url("../../assets/image/zj-box.png") no-repeat;
  background-size: 100% 100%;
}

.org-section,
.combat-section {

  .section-head {
    height: 35px;
    background: url("../../assets/image/z-bt.png") no-repeat;
    background-size: 100% 24px;
    color: #0c4988;
    background-position-y: 12px;
    display: flex;
    align-items: center;
    padding: 0 10px;
    font-size: 16px;
    font-weight: bold;
    margin: 0 5px;
  }
}

.org-section h2,
.combat-section h2 {
  padding: 0 8px 8px 8px;
  margin: 0;
  border-bottom: 2px solid #1890ff;
  color: #333;
}

.org-content,
.combat-content {
  /* min-height: 200px; */
  position: relative;
  height: calc(100% - 45px);
  overflow: auto;
}

.block-head {
  margin: 5px 10px;
  font-weight: bold;
  font-size: 15px;
  color: #333;
}

.attribute-block {
  // position: relative;
  border-radius: 6px;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.05);
  border: 1px solid #ebeef5;
  border-radius: 2px;
}
.block-title {
  display: flex;
  align-items: center;
  padding: 2px 5px;
  font-size: 15px;
  position: absolute;
  top: -12px;
  left: 5px;
  border-radius: 2px;

  i {
    font-size: 18px;
    margin-right: 8px;
    color: #409eff;
  }

  span {
    font-weight: bold;
    color: #303133;
  }
}

.block-content {
  padding: 5px;
  height: calc(100% - 0px);
  overflow-y: auto;
  margin-top: 0px;
  grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
  gap: 12px;
  display: flex;
  .attribute-items {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(70px, 1fr));
    gap: 10px;
    padding: 5px;

    .attribute-item {
      margin: 0 auto;
      //background: #eef2f8;
      //border: 1px solid #c9d5e1;
      border-radius: 2px;
      cursor: move;
      transition: all 0.3s;

      &:hover {
        background: #f5f7fa;
        border-color: #409eff;
        box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
      }
    }
  }
  .attribute-name {
    width: 100%;
    color: #16314b;
    font-size: 14px;
    text-align: center;
    padding: 2px 0px;
    background-color: #d7dee3;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .dropped-item {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
    background-color: #eff1f8;
    border: solid 1px #bccddf;
    border-radius: 2px;
    transition: all 0.3s;

    &:hover {
      // background: #ecf5ff;
      // transform: translateY(-2px);
    }

    i {
      font-size: 18px;
      margin-right: 8px;
      color: #409eff;
    }

    span {
      color: #606266;
    }
  }
}
.wqzb-content{
  position: relative;
  height: calc(100% - 0px);
  overflow-y: auto;
  margin: 10px;
  margin-left: 0;
  grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
  gap: 12px;
  border: solid 1px #bccddf;

  .block-body{
    display: flex;
    height: 98px;
    padding: 5px;
    background-color: #ffffff;
  }
  .block-footer{
    height: 33px;
    background-color: #d7dee3;
    display: flex;
    align-items: center;
    padding: 0 5px;
    .wqzb-name{
      width: 100%;
      display: flex;
      align-items: center;
      justify-content: space-between;
      color:#082c53;

      ::v-deep .el-input-number--mini{
        width: 90px;
        line-height: 23px;
      }
      ::v-deep .el-input-number__decrease,
      ::v-deep .el-input-number__increase{
        background-color: #d9e2ea;
      }
      ::v-deep .el-input__inner{
        border: solid 1px #a1b6c9;
        border-radius: 0px;
      }
      ::v-deep .el-input-number--mini .el-input__inner {
        padding-left: 30px;
        padding-right: 30px;
        height: 25px;
        line-height: 25px;
        font-size: 18px;
        color:#082c53;
      }
      ::v-deep .el-input-number__decrease {
        left: 1px;
        border-radius: 0px 0 0 0px;
        border-right: 1px solid #a1b6c9;
      }
      ::v-deep .el-input-number__increase {
        right: 1px;
        border-radius: 0 0px 0px 0;
        border-left: 1px solid #a1b6c9;
      }
    }
  }
  .dropped-people {
    margin: 0px 5px;
  }
  .attribute-name {
    //width: 100%;
    color: #16314b;
    font-size: 14px;
    text-align: center;
    padding: 2px 0px;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
    text-overflow: ellipsis;
  }

}
.hoverTool1,
.hoverTool {
  position: absolute;
  top: 0;
  width: 100%;
  height: 100%;
  //background-color: rgb(0 0 0 / 66%);
  background-color: rgba(6, 41, 69, 0.4);
  //border: solid 1px #bccddf;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  color: #fff;
  border-radius: 0px;
  cursor: pointer;
  z-index: 99;

  .tool-btn{
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 15px;
    background-image: linear-gradient(0deg, #04a67a 0%, #197f72 100%);
    border-radius: 1px;
    border: solid 1px #a4feff;
    padding: 3px 10px;
  }
}

.hoverTool1{
  display: flex;
  flex-direction: row;
  justify-content: space-around;
  height: calc(100% - 32px);
}

.attribute-right {
  background: url("../../assets/image/r-box.png") no-repeat;
  background-size: 100% 100%;
  margin-left: 10px;
}

.drawer-head {
  height: 35px;
  background: url("../../assets/image/min-title.png") no-repeat;
  background-size: 100% 24px;
  color: #0c4988;
  background-position-y: 12px;
  display: flex;
  align-items: center;
  padding: 0 5px;
  font-size: 16px;
  font-weight: bold;
  //margin: 5px 10px 0px;
}

.attribute-right,
.attribute-modal {

  :deep(.vxe-modal--box) {
    border-radius: 4px;
    overflow: hidden;
  }

  :deep(.vxe-modal--header) {
    background-color: #f5f7fa;
    padding: 12px 15px;
  }

  :deep(.vxe-modal--body) {
    padding: 0;
  }

  .drawer-content {
    height: 100%;
    display: flex;
    flex-direction: column;

    .drawer-attributes {
      flex: 1;
      height: calc(100% - 35px);
      width: 350px;
      overflow-y: auto;
      padding: 5px;
    }
  }
}

/* 属性面板样式 */
.drawer-attributes {
  .attribute-section {
    margin-bottom: 0px;

    .section-title {
      font-size: 15px;
      font-weight: bold;
      padding: 5px;
      margin-bottom: 0px;
    }

    .attribute-items {
      display: grid;
      // grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
      grid-template-columns: repeat(auto-fill, minmax(70px, 1fr));
      gap: 10px;
      padding: 5px;

      .attribute-item {
        //display: flex;
        //align-items: center;
        //justify-content: space-around;
        //padding: 5px 10px 0;
        margin: 0 auto;
        background: #eef2f8;
        border: 1px solid #c9d5e1;
        border-radius: 2px;
        cursor: move;
        transition: all 0.3s;

        &:hover {
          background: #f5f7fa;
          border-color: #409eff;
          box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
        }

        .attribute-name {
          color: #16314b;
          font-size: 14px;
          text-align: center;
          padding: 2px 0px;
          background-color: #d7dee3;
          display: -webkit-box;
          -webkit-box-orient: vertical;
          -webkit-line-clamp: 2;
          overflow: hidden;
          text-overflow: ellipsis;
        }
      }
    }
  }
}

/* 悬浮按钮样式 */
.floating-btn {
  position: fixed;
  right: 20px;
  top: 50%;
  transform: translateY(-50%);
  z-index: 999;
  padding: 10px 15px;
  border-radius: 4px 0 0 4px;
  box-shadow: -2px 0 8px rgba(0, 0, 0, 0.1);
  writing-mode: vertical-lr;
  letter-spacing: 2px;
}

.my-selecting {
  background-color: red;
  border: 2px solid red;
}
</style>
